<script lang="ts" setup>
import { RouteMap, useRouter } from '@/router';
import * as RestaurantBookingService from '../../../api/restaurant-booking';
import * as SpaService from '../../../api/spa';
import { useLocale } from '@/locale/locale';

const { t } = useLocale();
const router = useRouter();

/**
 * 检查按摩维护状态
 */
function checkSpaMaintenance() {
  SpaService.checkMaintenanceStatus().then((res) => {
    if (res.code == 0) {
      if (parseInt(res.data.isOpen) == 1) {
        router.to(RouteMap.spaWait);
      } else {
        router.to(RouteMap.spaHome);
      }
    }
  });
}

/**
 * 检查餐厅预订维护状态
 */
function checkRestaurantBookingMaintenanceStatus() {
  RestaurantBookingService.checkMaintenanceStatus().then((res) => {
    if (res.code == 0) {
      if (parseInt(res.data.isOpen) == 1) {
        router.to(RouteMap.webWeb);
      } else {
        router.to(RouteMap.restaurant);
      }
    }
  });
}
</script>
<template>
  <view class="home-services">
    <view class="text-lg text-primary font-medium">
      {{ t('LAKey_comprehensiveRealEstateServices') }}
    </view>
    <view class="mt-3 flex justify-between items-center">
      <view class="home-services__item is-first" @click="checkRestaurantBookingMaintenanceStatus">
        <image
          class="w-full h-full"
          src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/home_service_1.png"
        />
        <view class="home-services__text">{{ t('DiningReserveaRestaurant') }}</view>
      </view>
      <view class="home-services__item is-second" @click="router.to(RouteMap.carIndex)">
        <image
          class="w-full h-full"
          src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/home_service_2.png"
        />
        <view class="home-services__text">{{ t('OrderListTransfer') }}</view>
      </view>
      <view class="home-services__item is-third" @click="checkSpaMaintenance()">
        <image
          class="w-full h-full"
          src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/home_service_3.png"
        />
        <view class="home-services__text">{{ t('Spa') }}</view>
      </view>
      <view
        class="home-services__item is-fourth"
        @click="router.to(RouteMap.webWeb, { key: 'buy' })"
      >
        <image
          class="w-full h-full"
          src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/home_service_4.png"
        />
        <view class="home-services__text">{{ t('Investment') }}</view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.home-services {
  margin-bottom: 40rpx;
  padding: 32rpx 24rpx;
  border-radius: 28rpx;
  background-color: white;

  &__item {
    position: relative;
    width: 144rpx;
    height: 168rpx;

    & + & {
      margin-left: 16rpx;
    }

    &.is-first {
      color: #d8757a;
    }

    &.is-second {
      color: #df7c32;
    }

    &.is-third {
      color: #2dbb2a;
    }

    &.is-fourth {
      color: #4c93e3;
    }
  }

  &__text {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-top: 28rpx;
    font-weight: 500;
    font-size: 26rpx;
    line-height: 36rpx;
  }
}
</style>
